body {
    min-width: 320px;
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #fff;
    // max-width: 750px;
  }
  .w {
      width: 9.173333rem;
      margin: 0 auto;
  }
  header {
      height: 9.12rem;
      padding-top: .32rem;
      box-sizing: border-box;
      .top {
          width: 100%;
          height: .88rem;
          display: flex;
          justify-content: space-between;
          .topr,.topl {
              width: .853333rem;
              height: 100%;
              img {
                  width: 100%;
                  height: 100%;
              }
          }
      }
      .commod {
          width: 100%;
          height:7.92rem;
          background:url(../imgaes/commodity/组\ 1401@3x.png) no-repeat;
          background-size:cover;
          position: relative;
          p {
              opacity: 50%;
              width: 1.2rem;
              height: .613333rem;
              background-color:#333333;
              border-radius: .613333rem;
              color:#ffffff;
              font-size:.32rem;
              line-height: .613333rem;
              text-align: center;
              position: absolute;
              right: .426667rem;
              bottom: .346667rem;
          }
      }
  }
  .bg {
      width: 100%;
      height: 1.6rem;
      background: url(../imgaes/commodity/price@3x.png) no-repeat;
      background-size: contain;
      .bg-txt {
          height: 100%;
        //   background-color: pink;
          display: flex;
          justify-content: space-between;
          .bgl {
              height: 100%;
              width: 2.666667rem;
            //   background-color: skyblue;
              padding-top: .24rem;
              box-sizing: border-box;
              line-height: .4rem;
              p {
                font-weight:600;
                color:#ffffff;
                font-size:.533333rem;
                i {
                    font-size: .32rem;
                }
              }
              span {
                  font-size: .32rem;
                  color: #fff;
                  i {
                      text-decoration: line-through;
                  }
              }
              
          }
          .bgr {
            width: 2.266667rem;
            height: 100%;
            // background: orange;
            padding-top: .24rem;
            box-sizing: border-box;
            p {
                color:#ffffff;
                font-size:.32rem;
            }
            ul {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: .213333rem;
                li {
                    width: .32rem;
                    height: .32rem;
                    background-color: #fff;
                    color: #cc2525;
                    text-align: center;
                    line-height: .32rem;
                    font-size: .213333rem;
                    &:nth-child(1) {
                        width: .666667rem;
                        background:none;
                        font-size: .213333rem;
                    }
                }
                i {
                    color: #fff;
                    font-size: .213333rem;
                    
                }
            }
        }
      }
  }
  .yh {
      width: 9.173333rem;
      height: .8rem;
      background-color: #fff1ea;
      margin: .266667rem auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 .213333rem;
      box-sizing: border-box;
      img {
          width: 2.453333rem;
          height: .533333rem;
      }
      p {
        font-weight:600;
        color:#ff6200;
        font-size:.32rem;
        position: relative;
        margin-right: 10px;
        &::before {
            position: absolute;
            right: -0.266667rem;
            top: .106667rem;
            content: "";
            display: block;
            width: .213333rem;
            height: .213333rem;
            border-top: .053333rem solid #fb5906;
            border-right: .053333rem solid #fb5906;
            transform: rotate(45deg);
        }
      }
  }
  .tt {
      width: 9.173333rem;
      height: 2.586667rem;
      margin: 0 auto;
      padding-top: .373333rem;
      box-sizing: border-box;
      p {
        font-weight:600;
        color:#202020;
        font-size:.426667rem;
        margin-bottom: .266667rem;
        span {
            display:inline-block;
            width: .8rem;
            height: .4rem;
            margin: 0;
            img {
                width: .8rem;
                height: .4rem;
            }
        }
        
      }
      .img {
          width: 1.893333rem;
          height: .533333rem;
      }
  }
  .jx {
      width: 9.173333rem;
      height: 7.2rem;
      margin: .266667rem auto .266667rem;
      img {
        width: .213333rem;
        height: .346667rem;
    }
      .jx-1 {
          width: 100%;
          height: 1.6rem;
          display: flex;
          align-items: center;
          p {
            font-weight:600;
            color:#202020;
            font-size:.426667rem;
          }
         .jx-2 {
             width: 7.866667rem;
             height: 1.6rem;
             box-sizing: border-box;
             border-bottom: .026667rem solid #f3f3f3;
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding-left: .48rem;
             span {
                color:#494955;
                font-size:.426667rem;
             }
         }

      }
      .jx-3 {
          width: 100%;
          height: 2.186667rem;
          display: flex;
          align-items: center;
          p {
            font-weight:600;
            color:#202020;
            font-size:.426667rem;
          }
          .jx-4 {
              width: 7.866667rem;
              height: 100%;
              border-top: 1px solid #f6f6f6;
              border-bottom: 1px solid #f3f3f3;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .jx-t {
                  width: 4.8rem;
                  height: 100%;
                  padding: .773333rem 0 0 .506667rem;
                  box-sizing: border-box;
                p {
                    color:#494955;
                    font-size:.426667rem;
                    &:nth-child(2) {
                        font-size: .373333rem;
                    }
                  }
              }
             
          }
      }
      .jx-5 {
          width: 100%;
          height: 1.546667rem;
          display: flex;
          align-items: center;
          p {
            font-weight:600;
            color:#202020;
            font-size:.426667rem;
          }
          .jx-6 {
            height: 100%;
            width: 7.866667rem;
            box-sizing: border-box;
            border-top: 1px solid #f3f3f3;
            border-bottom: 1px solid #f6f6f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: .48rem;
            span {
                color:#494955;
                font-size:.426667rem;
            }
          }
      }
      .jx-7 {
          width: 100%;
          height: 1.866667rem;
          display: flex;
          align-items: center;
          p {
            font-weight:600;
            color:#202020;
            font-size:.426667rem;
          }
      }
      .jx-8 {
        width: 7.866667rem;
        height: 100%;
        border-top: 1px solid #f3f3f3;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
       align-items: center; 
       padding-left: .48rem;
       span {
        color:#494955;
        font-size:.426667rem;
       }
      }
  }
  .conter {
      width:100%;
      height: 1.786667rem;
      border-radius: .266667rem;
      margin-bottom: .266667rem;
      .conter-w {
          height: 100%;
          display: flex;
          align-items: center;
          p {
            font-weight:600;
            color:#202020;
            font-size:.426667rem;
          }
          ul {
              display: flex;
              height: 100%;
              width: 7.866667rem;
              justify-content: space-between;
              li {
                  width: 20%;
                  text-align: center;
                  padding-top: .4rem;
                  box-sizing: border-box;
                  &:nth-child(4) {
                      width: 30%;
                  }
                  p {
                    color:#494955;
                    font-size:.373333rem;
                    &:nth-child(2) {
                        color:#b0b8c2;
                        font-size:.32rem;
                    }
                  }
              }
          }
      }
  }
  .pl {
      width: 100%;
      height: 9.2rem;
      .pl-w {
          height: 100%;
          padding-top: .613333rem;
          box-sizing: border-box;
          .plt {
              width: 100%;
              height: .533333rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              p {
                font-weight:600;
                color:#202020;
                font-size:.426667rem;
                i {
                    display: inline-block;
                    width: .133333rem;
                    height: .48rem;
                    background-color:#fd444c;
                    border-radius:.533333rem;
                    vertical-align: middle;
                    margin-right: .106667rem;
                }
              }
              a {
                color:#b0b8c2;
                font-size:.426667rem;
                margin-left: 2rem;
              }
              img {
                  width: .133333rem;
                  height: .293333rem;
              }
          }
          .xq {
              width: 100%;
              height: .746667rem;
              margin-top: .533333rem;
              span {
                  display:block;
                width:3.2rem;
                height:.746667rem;
                background-color:#f2f2f2;
                border-radius:.133333rem;
                text-align: center;
                line-height:.746667rem;
                color:#202020;
                font-size:.373333rem;
                float: left;
                &:nth-child(2) {
                    width: 3.466667rem;
                    margin-left: .4rem;
                }
              }
          }
          .yht {
              width: 100%;
              height: 3.733333rem;
              margin-top: .373333rem;
              .yh-g {
                  width: 100%;
                  height: 1.066667rem;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .yh-img {
                      width:3.466667rem;
                      height: 100%;
                      img {
                          display:inline-block;
                          width: 1.066667rem;
                          height: 1.066667rem;
                          vertical-align: middle;
                      }
                      span {
                        font-weight:500;
                        color:#000000;
                        font-size:.32rem;
                      }
                      .imgtr {
                          width: 1.093333rem;
                          height: .346667rem;
                      }
                  }
                  .wx {
                      width: 2.533333rem;
                      height: auto;
                      img {
                          width: .32rem;
                          height: .32rem;
                          display: inline-block;
                      }
                  }
                  
              }
              .text {
                width: 100%;
                height: 1.173333rem;
                color:#494955;
                font-size:.426667rem;
                margin: .346667rem 0 .133333rem 0;
            }
            .gg {
                width: 100%;
                height: 1.066667rem;
                display: flex;
                p {
                    color:#b0b8c2;
                    font-size:.373333rem;
                }
                .gg-t {
                    height:.933333rem;
                    width: 7.733333rem;
                    border-bottom: 1px solid #ededed;
                    p {
                        color:#b0b8c2;
                        font-size:.373333rem;
                    }
                }
            }
          }
         .wd {
             width: 100%;
             height: 2.666667rem;
            //  background-color: orange;
             .wd1 {
                 width: 100%;
                 height: .533333rem;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: .4rem;
                 p {
                    font-weight:600;
                    color:#2f2e2e;
                    font-size:.426667rem;
                    i {
                        display: inline-block;
                        width: .133333rem;
                        height: .48rem;
                        background-color:#fd444c;
                        border-radius:.533333rem;
                        vertical-align: middle;
                        margin-right: .106667rem;
                    }
                 }
                 a {
                    color:#b0b8c2;
                    font-size:.426667rem;
                    margin-left: 3.866667rem;
                  }
                  img {
                      width: .133333rem;
                      height: .293333rem;
                  }
             }
             .wd2 {
                 width: 100%;
                 height: .48rem;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-bottom: .32rem;
                 span {
                    color:#494955;
                    font-size:.426667rem;
                    img {
                        width: .426667rem;
                        height: .426667rem;
                        display: inline-block;
                        vertical-align: middle;
                    }
                 }
                 a {
                    color:#8c9198;
                    font-size:.373333rem;
                    margin-right: .133333rem;
                 }
             }
          }
      }
  }
  .foot {
      height: 325px;
      padding-top: .48rem;
      .wd1 {
        width: 100%;
        height: .533333rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .4rem;
        p {
           font-weight:600;
           color:#2f2e2e;
           font-size:.426667rem;
           i {
               display: inline-block;
               width: .133333rem;
               height: .48rem;
               background-color:#fd444c;
               border-radius:.533333rem;
               vertical-align: middle;
               margin-right: .106667rem;
           }
        }
        a {
           color:#b0b8c2;
           font-size:.426667rem;
           margin-left:4.666667rem;
         }
         img {
             width: .133333rem;
             height: .293333rem;
         }
    }
    .foot-t {
        width: 100%;
        height: 3.2rem;
        margin-bottom: .666667rem;
        .foot-r {
            width: 100%;
            height: .533333rem;
            margin-bottom: .4rem;
            line-height: 0;
            span {
                color:#6a6c6b;
                font-size:.373333rem;
                &:nth-child(2) {
                    font-weight:600;
                    color:#202020;
                    font-size:.373333rem;
                    margin-left: 1.626667rem;
                }
            }
            &:nth-child(4) {
                margin: 0;
            }
        }
    }
    .footer {
        width: 100%;
        height: 1.066667rem;
        display: flex;
        align-items: center;
        margin-bottom: .666667rem;
        p {
            font-weight:600;
            color:#202020;
            font-size:.373333rem;
            width:1.786667rem;
        }
        ul {
            height: 100%;
            width: 7.92rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid #ededed;
            li {
                width: 20%;
                font-weight:600;
                color:#202020;
                font-size:.373333rem;
            }
        }
    }
  }
  .imgtre {
      width: 100%;
      height: auto;
      img {
          width: 100%;
          height: auto;
      }
  }
  footer {
      width: 100%;
      height: 1.44rem;
      background: #fff;
      position: fixed;
      left: 0;
      bottom: 0;
      ul {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          li {
              box-sizing: border-box;
              &:nth-child(1) {
                  width: 2.72rem;
                  height: 100%;
                  border-right: 1px solid #f8f8f8;
                  padding-top: .266667rem;
                  span {
                      display: inline-block;
                      text-align: center;
                      &:nth-child(1) {
                          width: .933333rem;
                          height: .826667rem;
                          margin-left: .293333rem;
                          img {
                              width: .56rem;
                              height: .453333rem;
                              margin: 0 auto;
                          }
                      }
                      p {
                        color:#323232;
                        font-size:.213333rem;
                        line-height:.426667rem;
                      }
                      &:nth-child(2) {
                        width: 1.2rem;
                        height: .826667rem;
                        img{
                            width: .56rem;
                            height: .48rem;
                            margin: 0 auto;
                        }
                      
                  }
                  
                  }
              }
              &:nth-child(2) {
                  width: 3.92rem;
                  height: 100%;
                  line-height: 1.44rem;
                  text-align: center;
                  font-weight: 700;
                  color: #f23a3a;
                  font-size: .373333rem;
              }
              &:nth-child(3) {
                  width: 3.36rem;
                  height: 100%;
                  line-height: 1.44rem;
                  text-align: center;
                  background-color: #ff6200;
                  font-size: .373333rem;
                  a {
                      color: #fff;
                  }
              }
          }
      }
  }